<template>
    <div class="rotation" v-if="isRoot === 0">
          <el-carousel height="650px">
            <el-carousel-item v-for="item in 4" :key="item">
            <img  src="../../assets/images/index/轮播图1.jpg" alt="">
          </el-carousel-item>
        </el-carousel>
        <div class="MidClass">
          <div class="hotActivity">
            <MiniTitle>热点新闻</MiniTitle>
            <div class="contiansBox">
             <img style="width:670px; height:425px" src="../../assets/images/index/摄图网.png" alt="">
            <div class="contains">
              <NewsTitle></NewsTitle>
            </div>
          </div>
        </div>
        <div class="fasterNews">
          <MiniTitle>非遗快讯</MiniTitle>
          <hr color='#fe8c00' size="3px"/>
          <div class="contains">
              <NewsTitle></NewsTitle>
            </div>

        </div>
        <div class="relevantPolicie">
          <MiniTitle>相关政策</MiniTitle>
          <hr color="#fe8c00" size="3px" />
          <div class="contains">
              <NewsTitle></NewsTitle>
            </div>

        </div>
        <div class="knowlege">
          <MiniTitle>非遗小知识</MiniTitle>
          <hr color="#fe8c00" size="3px" />
          <div class="contains">
            <div class="boxTop">
              <!-- <div class="_button">以下图片展示的内容是属于?</div> -->
              <button>以下图片展示的内容是属于?</button>

              <div class="_text">换一题</div>
            </div>
            <div class="boxMid">
              <div class="left">
                <img src="../../assets/images/index/非遗小知识.jpg" alt="">
              </div>
              <div class="right">
                <el-radio  label="item.id" v-for="item in question.options" v-bind:key='item.id'>{{item.title}}</el-radio>
              </div>
            </div>
          </div>
        </div>
      </div>

  </div>

</template>

<script>
import MiniTitle from '../../components/index/miniTitle.vue' 
import NewsTitle from'../../components/index/newsTitle.vue'

export default {
    components:{ MiniTitle, NewsTitle },
    data() { 
        return { 
            activeIndex2: "0" , 
            tempActive:'0', 
            isRoot:0,
            circleUrl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            menu:[ 
                { id:'0', title:'index', name:'首页',}, 
                { id:'1', title:'science',name:'非遗科普', }, 
                { id:'2', title:'shopping', name:'非遗商城', }, 
                { id:'3',title:'class', name:'非遗课堂', }, 
                { id:'4', title:'activity', name:'非遗活动',}, 
                { id:'5', title:'cooperation', name:'合作共赢', }, 
            ], 
            question:{ 
                ans:68,
                options:[ 
                    {id:0,title:'刺绣'}, 
                    {id:1,title:'雕刻'}, 
                    {id:2,title:'竹编'},
                    {id:3,title:'竹刻'} ] 
            }, 
        };

    }
}
</script>

<style lang="less" scoped>
    .rotation{ 
        img{ width: 100%; } 
        .MidClass{ 
            margin:100px 50px; 
            display: flex;
            flex-direction: row; 
            justify-content: space-between; 
            align-content: center;
            flex-flow: wrap; 
            .hotActivity{ 
                width: 650px; 
                height: 500px; 
                .contains{ 
                    position:relative; 
                    left: 10%; 
                    bottom: 350px; 
                    width: 500px; 
                }
            } 
            .fasterNews{ 
                width: 900px;
                .contains{ 
                    margin-top: 35px; 
                } 
            } 
            .relevantPolicie{ 
                width: 900px; 
                .contains{
                     margin-top: 35px; 
                } 
            } 
            .knowlege{ 
                width: 700px; 
                .contains{ 
                    margin-top: 35px;
                    .boxTop{ display: flex; 
                        flex-direction: row; 
                        button{ width: 500px; height: 50px;border:2px solid #fe8c00; border-radius: 30px; font-size: 18px; } 
                        ._text{ font-size: 30px; margin-left: 60px; line-height: 42px; color: #fe8c00; } 
                    }
                    .boxMid{ margin-top: 60px; display: flex; flex-direction: row; 
                        img{ width:340px; height: 240px; } 
                        .right{ 
                            margin-left: 40px; 
                            margin-top: 40px; 
                            display:flex; 
                            flex-direction: row; 
                            flex-flow: wrap; 
                            .el-radio /deep/ .el-radio__inner{width: 25px; height: 25px; } 
                            .el-radio /deep/ .el-radio__label{ font-size: 25px;} 
                        } 
                    } 
                } 
            } 
        } 
    }

</style>